<template>
  <div class="home">
    <LayoutComponent>
      <h1>总价：{{ allPrice }}</h1>
      <template v-for="item in cartList">
        <van-panel :key="item.id" :title="item.title" :desc="item.desc">
          <div>
            <van-image lazy-load width="100" height="100" :src="item.img" />
          </div>
          数量：{{ item.count }}
          <template #footer>
            <van-button size="small" @click="handleAddItem(item)">加</van-button>
            <van-button size="small" type="danger" @click="handleReduceItem(item)">减</van-button>
          </template>
        </van-panel>
      </template>
    </LayoutComponent>
  </div>
</template>

<script>
import LayoutComponent from '@/layout/index.vue'
import { mapActions, mapState, mapMutations, mapGetters } from 'vuex'
import Vue from 'vue'
import { Lazyload } from 'vant'

Vue.use(Lazyload)

export default {
  name: 'HomeView',
  components: {
    LayoutComponent,
  },
  // mapState 放置在计算属性中拿取
  computed: {
    ...mapState(['cartList']),
    ...mapGetters(['allPrice']),
  },
  created() {},
  methods: {
    ...mapMutations(['addItem', 'reduceItem']),
    handleAddItem(item) {
      this.addItem(item)
    },
    handleReduceItem(item) {
      this.reduceItem(item)
    },
  },
}
</script>
<style lang="scss" scoped>
.van-panel {
  // background: #eee;
  margin: 5px;
}
.van-panel__footer {
  padding: 8px 16px;
  display: flex;
  justify-content: flex-end;
}
</style>
